---
import { renderRichText, renderTitle } from "../../../lib/contentful/render.ts"
import ButtonA from "../../ButtonA.astro"
import ContainedSection from "../../ContainedSection.astro"
import H1 from "../../typography/h2.astro"
import QuoteSubTitle from "../../typography/QuoteSubTitle.astro"

interface Props {
  title: any
  text: any
}

const { title, text } = Astro.props

const titleHtml = renderTitle(title)
const textHtml = renderRichText(text)
---

<ContainedSection>
  <div class="flex flex-col-reverse md:flex-row lg:gap-12">
    <div class="flex flex-col justify-center gap-4 flex-1">
      <H1>
        <Fragment set:html={titleHtml} />
      </H1>
      <div class="max-w-[438px]">
        <QuoteSubTitle>
          <Fragment set:html={textHtml} />
        </QuoteSubTitle>
      </div>
      <ButtonA href="/learn">Learn More</ButtonA>
    </div>
    <div class="flex justify-center md:justify-start flex-1">
      <div class="relative max-w-md md:max-w-2xl">
        <video
          class="w-full h-full object-cover"
          src="https://videos.cdn.union.build/radial-glass-v8.mp4"
          autoplay
          muted
          playsinline
          oncanplay="true"
          onloadeddata="true"
          onloadedmetadata="true"
          loop
        >
        </video>
      </div>
    </div>
  </div>
</ContainedSection>
